<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染v-if</title>
		<style>
			img{
				width: 100px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				条件渲染：
					v-if:
						适用于：切换频率很低的场景
						特点：不展示的DOM节点直接被删除

					v-show:
						适用于：切换频率很高的场景
						特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉
					
					严重注意：使用v-if的时，DOM节点可能无法获取到，而使用v-show一定可以获取到DOM节点。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<button @click="changeWeather">切换天气</button>
			<h2>今天天气很{{text}}</h2>

			<div v-if="isHot === 0">
				<img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" alt=""><br/>
				<span>建议：心静自然凉</span>
			</div>

			<div v-else-if="isHot === 1" >
				<img src="https://img0.baidu.com/it/u=2181452007,1100013642&fm=26&fmt=auto&gp=0.jpg" alt=""><br/>
				<span>建议：不冷不热就好好学习吧</span>
			</div>

			<div v-else="isHot === 2">
				<img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" alt=""><br/>
				<span>建议：穿好你秋裤</span>
			</div>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				isHot:0 //0炎热  1温暖  2寒冷
			},
			computed:{
				text(){
					if(this.isHot === 0) return '炎热'
					else if(this.isHot === 1) return '温暖'
					else return '寒冷'
				}
			},
			methods: {
				changeWeather(){
					this.isHot += 1
					if(this.isHot > 2) this.isHot = 0
				}
			},
		})
	</script>
</html>